<template>
  <div class="center-container">
    <el-card class="grouping" shadow="hover">
      <el-upload
        class="upload-demo"
        action="http://localhost:8080/group/addGroup"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
      </el-upload>
      <el-button @click="deleteAll" type="danger">删除所有数据</el-button>
      <el-button @click="SetGroup" >修改数据</el-button>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const file = ref(null);

    const handleSuccess = (response, file, fileList) => {
      console.log('文件上传成功：', response);
      alert('文件上传成功。');
    };

    const handleRemove = (file, fileList) => {
      console.log(file, fileList);
    };

    const handlePreview = file => {
      console.log(file);
    };

    const beforeUpload = file => {
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isXLSX) {
        alert('只能上传xlsx文件！');
      }
      return isXLSX;
    };

    const deleteAll = () => {
      axios.post('http://localhost:8080/group/deleteAll')
        .then(response => {
          console.log('res', response.data);
          alert(response.data);
        })
        .catch(error => {
          console.error(error);
          alert('删除数据失败，请稍后再试');
        });
    };

    const SetGroup = () => {
        // 在点击时进行路由跳转
            // router.push({ path: '/SetGroup' });
            router.push({ name: 'upgroup' });
      }

    return {
      file,
      handleSuccess,
      handleRemove,
      handlePreview,
      beforeUpload,
      deleteAll,
      SetGroup
    };
  }
};
</script>

<style>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.grouping {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
}

.el-upload__tip {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

</style>
